<script setup lang="ts">
import { ref} from 'vue';
import {Search, Refresh} from '@element-plus/icons-vue';
import {getApplyInfo, getDetails, passAndRef, searchInfo} from "@/api/system/apply";
import {ApplyInter, passRef} from "@/api/interface/interFace";
import {ElMessageBox} from "element-plus";
const dataPick = ref('');
const input = ref('');
const dialogFormVisible = ref(false);
let appName = ref();
let applyInfo = ref<object[]>([]);
let auditId = ref();
let appInfototal = ref(0);
let dialogVisible = ref(false);
let refReason = ref('');
let inviteePhone = ref('');
let companyIntro = ref('');
let company = ref('');
let licensePic = ref('');
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('Are you sure to close this dialog?')
        .then(() => {
            done();
        })
        .catch(() => {
            // catch error
        });
};

function reset(): void {
    dataPick.value = '';
    input.value = '';
    applyInfo.value.length = 0;
    searchParams.value.requestUserId = input.value;
    searchInfo(searchParams.value).then(res => {
        console.log(res);
        (res as any).rows.forEach(item => {
            switch (Number(item.auditState)) {
                case 0:
                    item.auditText = '审核中';
                    break;
                case 1:
                    item.auditText = '通过';
                    break;
                case 2:
                    item.auditText = '驳回';
                    break;
                default:
                    item.auditText = '待审核';
            }

        });
        applyInfo.value?.push((res as any).rows);

    });
}

let params = ref<ApplyInter>({
    requestUsername: '',
    startTime: '',
    endTime: '',
    pageNum: 1,
    pageSize: 10,
});
let searchParams = ref({
    requestUserId: '',
    startTime: '',
    endTime: '',
    requestUsername:''
});
let passRefs = ref<passRef>(
    {
        applicationId: 0,
        auditState: "1",
    }
);
let refRefs = ref<passRef>({
    applicationId: 0,
    auditState: "2",
    rejectionReason: ''
});
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`);
    params.value.pageNum = val;
    applyInfo.value.length = 0;
    getApplyInfo(params.value).then(res => {
        console.log(res);
        (res as any).rows.forEach(item => {
            switch (Number(item.auditState)) {
                case 0:
                    item.auditText = '审核中';
                    break;
                case 1:
                    item.auditText = '通过';
                    break;
                case 2:
                    item.auditText = '驳回';
                    break;
                default:
                    item.auditText = '待审核';
            }

        });
        applyInfo.value?.push((res as any).rows);
    });
};
getApplyInfo(params.value).then(res => {
    console.log(res);
    (res as any).rows.forEach((item) => {
        switch (Number(item.auditState)) {
            case 0:
                item.auditText = '审核中';
                break;
            case 1:
                item.auditText = '通过';
                break;
            case 2:
                item.auditText = '驳回';
                break;
            default:
                item.auditText = '待审核';
        }

    });
    applyInfo.value?.push((res as any).rows);
    appInfototal.value = (res as any).total;

});

function searchApplyInfo() {
    applyInfo.value.length = 0;
    searchParams.value.requestUsername = input.value;
    searchParams.value.startTime = dataPick.value[0];
    searchParams.value.endTime = dataPick.value[1];
    searchInfo(searchParams.value).then(res => {
        console.log(res);
        (res as any).rows.forEach(item => {
            switch (Number(item.auditState)) {
                case 0:
                    item.auditText = '审核中';
                    break;
                case 1:
                    item.auditText = '通过';
                    break;
                case 2:
                    item.auditText = '驳回';
                    break;
                default:
                    item.auditText = '待审核';
            }

        });
        applyInfo.value?.push((res as any).rows);

    });
}


function applyDetails(appId: number, app) {
    dialogFormVisible.value = true;
    appName.value = appId;
    auditId.value = app.$index;
    let radioObjs = document.getElementsByClassName('radios') as HTMLCollectionOf<HTMLInputElement>;
    getDetails(appId).then((res) => {
        console.log(res);
        switch (res.data.auditState) {
            case  '0':

                radioObjs[0].checked = true;
                break;
            case '1':

                radioObjs[1].checked = true;
                break;
            case '2':

                radioObjs[2].checked = true;
                break;
            default:
                break;
        }
        refReason.value = res.data.rejectionReason;
        inviteePhone.value = res.data.inviteePhone;
        companyIntro.value = res.data.companyIntro;
        company.value = res.data.company;
        licensePic.value = res.data.licensePic;

    });

}

function cencelDetails() {
    dialogFormVisible.value = false;
    refReason.value = '';
}

function passApply(appId,app) {
    console.log(app);
    passRefs.value.applicationId = appId;
    passAndRef(passRefs.value).then(res => {
        console.log(res);
    });
    applyInfo.value.length = 0;
    getApplyInfo(params.value).then(res => {
        console.log(res);
        (res as any).rows.forEach(item => {
            switch (Number(item.auditState)) {
                case 0:
                    item.auditText = '审核中';
                    break;
                case 1:
                    item.auditText = '通过';
                    break;
                case 2:
                    item.auditText = '驳回';
                    break;
                default:
                    item.auditText = '待审核';
            }

        });
        applyInfo.value?.push((res as any).rows);
    });

}

function refApply(appId) {
    dialogVisible.value = true;
    refRefs.value.applicationId = appId;


}
function sureRef() {
    dialogVisible.value = false;
    refRefs.value.rejectionReason = refReason.value;
    passAndRef(refRefs.value).then(res => {
        console.log(res);
    });
    applyInfo.value.length = 0;
    getApplyInfo(params.value).then(res => {
        console.log(res);
        (res as any).rows.forEach(item => {
            switch (Number(item.auditState)) {
                case 0:
                    item.auditText = '审核中';
                    break;
                case 1:
                    item.auditText = '通过';
                    break;
                case 2:
                    item.auditText = '驳回';
                    break;
                default:
                    item.auditText = '待审核';
            }

        });
        applyInfo.value?.push((res as any).rows);
    });
    refReason.value = '';
}



</script>
<template>
    <div>
        <div class="title" style="position: relative">
            <span class="inputTitle">申请人</span>
            <el-input
                v-model="input"
                class="applyName"
                placeholder="请输入姓名"
                clearable
            />
            <span class="inputTitle" style="margin-left: 50px">创建时间</span>
            <el-date-picker
                v-model="dataPick"
                type="daterange"
                value-format="YYYY-MM-DD"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                range-separator="至"
                class="dataInput"
                :default-value="[new Date(2024, 3, 25), new Date(2024, 3, 25)]"
            />
            <span class="btns">
            <el-button type="primary" :icon="Search" class="serachBtn" @click="searchApplyInfo">查询</el-button>
            <el-button :icon="Refresh" class="refreshBtn" @click="reset">重置</el-button>
        </span>
        </div>
        <section class='tableBox' style="padding: 0 30px">
            <el-table :data="(applyInfo[0] as any)" style="width: 100%;margin-top: 50px" stripe>
                <template #empty>
                    <el-empty description="暂无数据"/>
                </template>
                <el-table-column prop="company" label="申请公司" width="180" height/>
                <el-table-column prop="requestUsername" label="申请人" width="180" height/>
                <el-table-column prop="invitee" label="被邀企业" height/>
                <el-table-column prop="invitee" label="被邀人" height/>
                <el-table-column prop="createdTime" label="提交时间" height/>
                <el-table-column prop="auditText" label="状态" height/>
                <el-table-column prop="操作" label="操作" height>
                    <template #default=appIndex>
                        <button  :class="Number(appIndex.row.auditState)? 'btnClass':'' " style="color: #1c84c6" :disabled=Number(appIndex.row.auditState) @click="passApply(appIndex.row.applicationId,appIndex)">通过</button>
                        <button  :class="Number(appIndex.row.auditState)? 'btnClass':'' " style="margin-left: 10px;color: #1c84c6" :disabled=Number(appIndex.row.auditState) @click="refApply(appIndex.row.applicationId)">驳回</button>
                        <button style="color: #1c84c6;margin-left: 10px"   @click="applyDetails(appIndex.row.applicationId,appIndex)">详情</button>
                    </template>
                </el-table-column>
            </el-table>
        </section>
        <el-dialog v-model="dialogFormVisible" title="" width="762" class="dialog">
            <div style="font-size: 16px;font-weight: bolder;margin-bottom: 35px">姓&emsp;&emsp;名:<span style="margin-left: 20px">{{ company }}</span></div>
            <div style="font-size: 16px;font-weight: bolder;margin-bottom: 35px">联系方式:<span style="margin-left: 20px">{{ inviteePhone }}</span></div>
            <div style="font-size: 16px;font-weight: bolder;margin-bottom: 35px">公司执照:
                <img style="width: 250px;height: 100px;border: 1px solid black;display: inline-block;margin-left: 20px;vertical-align: text-top"
                     :src="licensePic"
                     alt="">
            </div>
            <div style="font-size: 16px;font-weight: bolder;margin-bottom: 35px">审&emsp;&emsp;核:
                <div style="margin-left: 20px;display: inline-block">
                    <label><input disabled type="radio" name="auditStatus" value="审核中" class="radios"><span
                        style="margin-left: 10px;cursor: no-drop">审核中</span></label>
                    <label style="margin-left: 20px"> <input disabled type="radio" name="auditStatus" value="通过" class="radios"><span
                        style="margin-left: 10px;cursor: no-drop">通过</span></label>
                    <label style="margin-left: 20px"> <input disabled type="radio" name="auditStatus" value="驳回" class="radios"><span
                        style="margin-left: 10px;cursor: no-drop">驳回</span></label>
                </div>
            </div>
            <div style="font-size: 16px;font-weight: bolder;margin-bottom: 35px">后台介绍:<span style="margin-left: 20px">{{ companyIntro }}</span></div>
            <div style="font-size: 16px;font-weight: bolder;">驳回理由:<textarea
                v-model="refReason" readonly
                style="margin-left: 20px;vertical-align: text-top;width: 550px;height: 120px;outline: 1px solid grey;resize: none;cursor: no-drop"></textarea>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cencelDetails">取消</el-button>
                    <el-button type="primary" @click="cencelDetails">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <div style="position: relative">
            <span style="margin-left: 1000px;position: absolute;top: 8px">共{{appInfototal}}条数据</span>
            <el-pagination
                style="margin-top: 20px;margin-left: 1150px"
                :page-size="params.pageSize"
                layout="prev, pager, next"
                :total="appInfototal"
                @currentChange="handleCurrentChange"
            />
        </div>

        <el-dialog
            v-model="dialogVisible"
            title="请输入驳回理由"
            width="500"
            :before-close="handleClose"
            style="padding: 20px"
        >
            <textarea v-model='refReason' style="width: 100%;height: 100px; border: 1px solid grey;resize: none;outline: 0"></textarea>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="sureRef">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<style>
.btnClass{
    color:rgb(204, 196, 207) !important;
    cursor: no-drop;
}
.el-table .el-table__cell {
    padding: 18px !important;
}

.dialog {
    padding: 30px;
}

.cell {
    text-align: center !important;
    font-size: 14px;
}

.common-layout {
    margin-top: 40px;
    padding: 0 20px;
}

.el-header {
    background-color: rgb(248, 248, 249);
    height: 44px;
    font-size: 14px;
    font-weight: 600;
    color: #444;
    padding: 0 70px;
    line-height: 44px;
    border-bottom: 1px solid #d9d9d9;
}

.ulTitle {
    display: flex;
    justify-content: space-between;
}

.el-main {
    font-size: 14px;
    font-weight: 600;
    color: #444;
    padding: 0 70px;
    border-bottom: 1px solid #d9d9d9;
    height: 335px;
}

.el-footer {
    background-color: green;
}

li {
    list-style: none;
    float: left;
}

.btns {
    margin-left: 80px;
    position: absolute;
    bottom: -10px;
}

.serachBtn, .refreshBtn {
    width: 73px !important;
    height: 28px !important;
}

.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.title {
    height: 65px;
    border-bottom: 1px solid rgb(237, 237, 237);
    line-height: 65px;
    padding: 0 45px;
    overflow: hidden;
}

.inputTitle {
    font-size: 14px;
    font-weight: bolder;
    color: #666;
}

.applyName {
    width: 28%;
    margin-left: 15px;
    height: 28px;
    font-size: 12px;
}

.el-date-editor .el-range-input {
    font-size: 12px;
}
</style>
